<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>自定义参考系</title>
        <!--引入当前页面样式表-->
        <link href="./style.css" rel="stylesheet" type="text/css" />
        <script include="proj4" src="./static/libs/include-openlayers-local.js"></script>
        <script src="./static/libs/include-openlayers-local.js"></script>
        <style>
            #map {
                height: 800px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            //定义2362坐标系，高斯3带投影
            proj4.defs('EPSG:2362', '+proj=tmerc +a=6378137 +b=6356752.31414036 +lat_0=0 +lon_0=114 +x_0=38500000+y_0=0 +ellps=GRS80 +units=m +no_defs')

            var projection = new ol.proj.Projection({
                code: 'EPSG:2362',
                extent: [38570106.6565339, 4100174.3296849937, 38576679.186042026, 4107440.9868805557],
                units: 'm',
                axisOrientation: 'neu',
                global: false,
            })
            //结合proj4在ol3中自定义坐标系
            ol.proj.addProjection(projection)
            ol.proj.addCoordinateTransforms(
                'EPSG:4326',
                'EPSG:2362',
                function(coordinate) {
                    return proj4('EPSG:4326', 'EPSG:2362', coordinate)
                },
                function(coordinate) {
                    return proj4('EPSG:2362', 'EPSG:4326', coordinate)
                }
            )

            //初始化地图容器
            map = new ol.Map({
                target: 'map',
                view: new ol.View({
                    center: ol.proj.transform([114.8, 37.09], 'EPSG:4326', projection),
                    zoom: 3,
                    projection: projection,
                }),
            })
            var { protocol, ip, port } = window.webclient
            //初始化地图文档图层对象
            mapDocLayer = new Zondy.Map.MapDocTileLayer('MapGIS IGS MapDocLayer', '高斯坐标', {
                ip: `${ip}`,
                port: `${port}`,
                projection: projection,
            })
            //将地图文档图层加载到地图中
            map.addLayer(mapDocLayer)
        </script>
    </body>
</html>
